<div class="kunpo-view">
    <div class="kunpo-setting">
        <ui-label id="kunpo-setting-label" value="导出路径"></ui-label>
        <ui-file id="kunpo-setting-file" type="directory" :value="exportPath"
            @change="onChangeExportPath($event.target.value)">
        </ui-file>
    </div>
    <kunpo-button class="kunpo-button"> </kunpo-button>

    <!-- 组件列表上方的 实体信息 -->
    <div class="info-header" v-if="entityName">
        <div class="entity-info-row">
            <div class="entity-alias">
                <ui-label value="实体别名"></ui-label>
                <ui-input class="alias-input" :value="entityAlias"
                    @change="onAliasChange($event.target.value)"></ui-input>
            </div>
            <div class="entity-group-field">
                <ui-label value="分组名"></ui-label>
                <ui-input class="group-input" :value="entityGroup"
                    @change="onGroupChange($event.target.value)"></ui-input>
            </div>
        </div>
        <div class="component-section">
            <ui-label value="组件"></ui-label>
            <div class="component-controls">
                <ui-input class="filter-input" placeholder="组件筛选" :value="searchValue"
                    @change="onSearch($event.target.value)"></ui-input>
                <ui-select class="component-select-input" placeholder="请选择组件" :value="selectedComponent"
                    @confirm="onSelectComponent($event.target.value)">
                    <option v-for="component in getFilteredComponents()" :key="component.name" :value="component.name">
                        {{ getComponentTitle(component.name) }}
                    </option>
                </ui-select>
            </div>
            <ui-button class="add-component-btn" @click="addComponent" :disabled="!selectedComponent">添加组件</ui-button>
        </div>
    </div>

    <div class="component-list-content">
        <component-info class="component-info" v-for="name in entityComponentNames" :componentName="name"
            :entityName="entityName" :key="entityName + '-' + name"></component-info>
    </div>
</div>